{% extends 'index.html' %}
{% block ace-content %}
<link href="/static/dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
<link href="/static/dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
<link href="/static/dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
<link href="/static/dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa fa-github"></i><code>{{project.project_name}}</code> 项目部署</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
 						<i class="fa    fa-gears"></i>代码部署
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-4">
                                <legend><i class="fa  fa-paper-plane"></i>部署服务器</legend>
                                    <form role="form" id="deployRun" class="main form-horizontal" >{% csrf_token %}
										<fieldset>															
											<div class="form-group">
												 <label class="col-sm-2 control-label">项目名称</label>
												 <div class="col-sm-6">
												 	<input type="text" class="form-control" name="project_name" value="{{project.project_name}}"  class="input-xlarge" disabled/>
												 	<input type="hidden" class="form-control" name="project_uuid" value="{{project.project_uuid}}" disabled/>
												 </div>
											</div>
		                                     <div class="form-group">
		                                            <label class="col-sm-2 control-label">目标服务器</label>
		                                            <div class="col-sm-6">
			                                            <select multiple class="selectpicker" data-live-search="true" name="project_server" required>
			                                            	{% for ds in serverList %}
			                                            		<option name="project_server" selected="selected"  value="{{ds.server}}">{{ds.server}}</option>
			                                            	{% endfor %}
			                                            </select>
		                                            </div>
		                                      </div> 											
											{% if project.project_model == 'branch' and project.project_repertory == 'git' %}																
											<div class="form-group">
												 <label class="col-sm-2 control-label">分支</label>
												 <div class="col-sm-6">
												   <select class="form-control" name="project_branch"  id="branch_choice"  onchange="javascript:oBtBranchChoice();">
															{% for ds in bList %}
																{% if ds.status == 1 %}
																	<option value="{{ds.name}}" selected="selected" name="project_branch">{{ds.value}}</option>
																{% else %}
																	<option value="{{ds.name}}" name="project_branch">{{ds.value}}</option>
																{% endif %}
															{% endfor %}							   		
													</select>							 	
												 </div>
											</div>													
											
											<div class="form-group">
												 <label class="col-sm-2 control-label">版本选择</label>
												 <div class="col-sm-6">
												   <select class="form-control" name="project_version" id="project_version" >
												   		<option selected="selected" value="" name="project_version" >请选择版本</option>
															{% for ds in vList %}
																<option value="{{ds.comid}}" name="project_version">{{ds.ver}} - {{ds.desc}} - {{ds.user}} </option>
															{% endfor %}						   		
													</select>	
												</div>
											</div>
											{% elif project.project_model == 'tag' and  project.project_repertory == 'git' %}
											<div class="form-group">
												 <label class="col-sm-2 control-label">标签</label>
												 <div class="col-sm-6">
												   <select class="form-control" name="project_branch"  >
												   		<option value="" name="project_branch">请选择Tag</option>
															{% for ds in bList %}
																<option value="{{ds.name}}" name="project_branch">{{ds.value}}</option>
															{% endfor %}							   		
													</select>							 	
												 </div>
											</div>	
											{% else %}
											<div class="form-group" style="display: none;>
												 <label class="col-sm-2 control-label">分支</label>
												 <div class="col-sm-6">
												   <select class="form-control" name="project_branch" >
														<option value="trunk" {% if project.project_model == 'trunk' and  project.project_repertory == 'svn' %} selected="selected" {% endif %} name="project_branch">trunk</option>	
														<option value="branch"  name="project_branch" {% if project.project_model == 'branch' and  project.project_repertory == 'svn' %} selected="selected" {% endif %} >branch</option>			
														<option value="tags"  name="project_branch" {% if project.project_model == 'tag' and  project.project_repertory == 'svn' %} selected="selected" {% endif %} >tags</option>		   		
													</select>							 	
												 </div>
											</div>													
												
												<div class="form-group">
													 <label class="col-sm-2 control-label">版本选择</label>
													 <div class="col-sm-6">
													   <select class="form-control" name="project_version" id="project_version" >
													   		<option selected="selected" value="" name="project_version" >请选择版本</option>
																{% for ds in vList %}
																	<option value="{{ds.comid}}" name="project_version">{{ds.ver}} - {{ds.desc}} - {{ds.user}} </option>
																{% endfor %}						   		
														</select>	
													</div>
												</div>																							
											{% endif %}																																													
											
											</fieldset>
											<legend></legend>
											<div class="form-group">
											<label class="col-sm-3 control-label"></label>
											<button type="button"  onclick="repealFromVaule(this)" class="btn btn-default" >撤销部署</button>
									 		<button type="button"  class="btn btn-default" onclick="runDeploy(this)" >确认部署</button>
									 		</div>
									 		
										</form>                                        
                                </div>
                                <!-- /.col-lg-6 (nested) -->
                                <div class="col-lg-8">
                                    <legend><i class="fa  fa-paper-plane-o"></i>部署结果</legend>       
								    <div class="form-group">
								
								        <!-- SmartWizard html -->
								        <div id="smartwizard">
								            <ul>
								                <li><a href="#get_code">获取代码<br /><small>pull code</small></a></li>
								                {% if project.project_type == 'compile' %}
								                <li><a href="#deploy_code">编译代码<br /><small>deploy code</small></a></li>
								                {% endif %}
								                <li><a href="#tar_code">打包代码<br /><small>pack code</small></a></li>
								                <li><a href="#rsync_code">部署代码<br /><small>rsync code</small></a></li>
								                {% if project.project_remote_command %}
												<li><a href="#cmd_code">执行命令<br /><small>remote command</small></a></li>
												{% endif %}
								            </ul>								
								        </div>
								        <br>

	  									<div class="well well-lg" style="background:#000000; color:#ADFF2F">
						                        <div id="result">
						                        </div>
					                    </div>
							
								
								    </div>				                                                   
                                <!-- /.col-lg-6 (nested) -->
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
</div>
<div style="visibility:hidden"><a id="scrollToTop"></a></div>
<script type="text/javascript" src="/static/dist/js/jquery.smartWizard.min.js"></script>
<script type="text/javascript">


		$(document).ready(function(){
		
		    // Step show event
		    $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {

		    });
		
		
		    // Smart Wizard
		    $('#smartwizard').smartWizard({
		            selected: 0,
		            theme: 'arrows',
		            transitionEffect:'fade',
		            showStepURLhash: true,
		
		    });
		

		});

	function oBtBranchChoice() {
		   var obj = document.getElementById("branch_choice"); 
		   var index = obj.selectedIndex;
		   var value = obj.options[index].value; 
		   $("#branch_choice option:selected").text('* '+value);
		   obj.options[index].selected = true;
		   if (value.length > 0 ){
				$.ajax({
					  type: 'POST',
					  url: '/deploy_version/' + {{project.id}} + '/',
					  data: {
						  "model":"branch",
						  'name':value,
						  'op':'query',
					  },
				      success:function(response){	
			                if (response["code"]=="200"){ 
			        			var htmlStr = '<select class="form-control" name="project_version" id="project_version"  required><option selected="selected" value="" name="order_comid" >请选择版本</option>';
			        			for (x in response["data"]){
									htmlStr += '<option value="'+ response["data"][x]['comid'] + '"name="order_comid">' + response["data"][x]['ver'] + ' - ' + response["data"][x]['desc'] + ' - ' + response["data"][x]['user'] +'</option>';																
								};
								htmlStr += '</select>'
								$('#project_version').html(htmlStr);
			                }
					},
		            error:function(response){
		            	window.wxc.xcConfirm("获取分支版本失败", window.wxc.xcConfirm.typeEnum.error);
		            },							  
					})		   	   
		   }
	}

	function repealFromVaule(){
		   document.getElementById("deployRun").reset();
	}
	
		
    
	function runDeploy(obj) {
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		$('#smartwizard').smartWizard("reset");
		var form = document.getElementById('deployRun');
		var post_data = {};
		for (var i = 1; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;
			var project = name.indexOf("project_");
			if ( project==0 && value.length==0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			}
			else if (name.length > 0 && value.length > 0){
				post_data[name] = value;
			};
			
		};
 		$("#result").html("服务器正在处理，请稍等。。。"); 
		/* 轮训获取结果 开始  */
	   var interval = setInterval(function(){  
	        $.ajax({  
	            url : '/deploy_result/{{project.id}}/',  
	            type : 'post', 
	            data:post_data, 
	            success : function(result){
	            	if (result["msg"] !== null ){
						if(result["msg"].indexOf("[Pack start") == 0){
	            			$('#smartwizard').smartWizard("next");
	            		}
						{% if project.project_type == 'compile' %}
						else if(result["msg"].indexOf("[DEPLOY start") == 0){
	            			$('#smartwizard').smartWizard("next");
	            		}
						{% endif %}
						else if(result["msg"].indexOf("[RSYNC start") == 0){
	            			$('#smartwizard').smartWizard("next");
	            		}else if(result["msg"].indexOf("[CMD start") == 0){
	            			$('#smartwizard').smartWizard("next");
	            		}
	            		$("#result").append("<p>"+result["msg"]+"</p>"); 
	            		document.getElementById("scrollToTop").scrollIntoView(); 
	            		if (result["msg"].indexOf("[Done]") == 0){
	            			clearInterval(interval);
	            			window.wxc.xcConfirm("项目部署成功", window.wxc.xcConfirm.typeEnum.success);
	            		}
	            	}  
	            }  
	        });  
	    },1000); 
		
	    /* 轮训获取结果结束  */
		$.ajax({
			url:'/deploy_run/'+"{{project.id}}/", //请求地址
			type:"POST",  //提交类似
			data:$("#deployRun").serialize(),  //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				if (response["code"] == "500"){
					clearInterval(interval);
					window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
				}
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("部署失败", window.wxc.xcConfirm.typeEnum.error);
	    		clearInterval(interval);
	    	}
		})	
	}	

{% if errorInfo %}
	window.wxc.xcConfirm("{{errorInfo}}", window.wxc.xcConfirm.typeEnum.error);
{% endif %}
</script>

{% endblock %}